<style scoped>
  .form-inline{
    background-color: #eee;
    padding: 15px 5px;
    margin-bottom: 10px;
  }

</style>
<template>
  <diV>
   <el-form :inline="true" :model="form" class="form-inline" ref="seachform">
      <el-form-item label="设备编号" prop="trackerId">
        <el-input v-model="form.trackerId" placeholder="设备编号"></el-input>
      </el-form-item>
      <el-form-item label="IMEI号" prop="imei" >
        <el-input v-model="form.imei" placeholder="IMEI号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="seach">查询</el-button>
        <el-button  @click="resetForm('seachform')">重置</el-button>
      </el-form-item>
    </el-form>
   <el-table
     :data="list"
     border
     style="width: 100%"
     v-loading="listLoading"
   >
     <el-table-column  label="选择">
       <template slot-scope="scope">
         <el-radio  v-model="mySelect" :label="scope.row.trackerId" @change="changeTracker">&nbsp;</el-radio>
       </template>
     </el-table-column>
     <el-table-column
       prop="trackerId"
       label="设备编号"
      >
     </el-table-column>
     <el-table-column
       prop="imei"
       label="IMEI号">
     </el-table-column>
   </el-table>
    <pagations :totalCount="totalCount" @changePage="changePage"></pagations>
  </diV>
</template>
<script>
  import Pagations from '@/components/pagations'
  import { queryTrackerList } from '@/api/list'
  export default {
    name: 'Permissions',
    props: {
      clear: { default: false },
    },
    data: function() {
      return {
        visible: this.showpermiModal,
        mySelect:'',
        form:{},
        list: [],
        totalCount:null,
        listLoading:true
      }
    },
    watch:{
      clear(val){
        if(!val){
          this.mySelect=''
        }
      }
    },
    components:{
      Pagations
    },
    methods: {
      changeTracker(e){
        this.$emit('chooseTracker',e)
      },
      fetchData(data) {
        this.listLoading = true
        queryTrackerList(data).then(response => {
          if(response && response.body){
            this.list = response.body.trackerList
            this.totalCount = response.body.count
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      },
      changePage(val) {
        this.fetchData({
          pageSize: 5,
          currentPage: val,
          binding:0,
          ...this.form
        })
      },
      seach(){
        this.fetchData({pageSize:5,binding:0,...this.form})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.seach( {binding:0,...this.form})

      }
    },
    created(){
      this.mySelect=''
      this.fetchData({binding:0,currentPage:1,pageSize:5})
    }
  }
</script>


